{extend name="base"}
{block name="main"}
<div id="app" v-cloak>
    <el-row class="ws-quote">
        <el-col :span="24" >
            <el-button type="primary" size="small" @click="href('{:url('')}')">待审核列表</el-button>
            <el-button type="primary" size="small" @click="href('{:url('',['state'=>1])}')">已审核列表</el-button>
            <el-input v-model="params.keyword" style="width: 250px;" size="small" placeholder="用户昵称、任务标题" clearable></el-input>
            <el-select v-model="params.status" placeholder="状态" size="small" clearable>
                <el-option label="全部状态" value="0"></el-option>
                <el-option label="待审核" value="2"></el-option>
                <el-option label="已完成" value="3"></el-option>
                <el-option label="审核失败" value="-1"></el-option>
                <el-option label="已过期" value="-2"></el-option>
                <el-option label="未提交" value="1"></el-option>
            </el-select>
            <el-date-picker
                  v-model="params.range"
                  type="daterange"
                  align="right"
                  unlink-panels
                  value-format="timestamp"
                  size="small"
                  range-separator="至"
                  start-placeholder="提交时间"
                  end-placeholder="提交时间"
                  :picker-options="pickerOptions">
            </el-date-picker>
            <el-button type="primary" size="small" @click="search('{:url('')}')">搜索</el-button>
        </el-col>
    </el-row>
    
    <div class="page">
      <span class="f_r page-total">共<span>{$list->total()}</span>条</span>
      {$list->render()|raw}
    </div>

    <el-table
        :default-expand-all="false"
        border
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="ID"
          align="center"
          prop="id">
        </el-table-column>
        <el-table-column
          label="用户"
          align="center"
          prop="uname">
        </el-table-column>
        <el-table-column
          label="任务标题"
          align="center"
          prop="title">
        </el-table-column>
        <el-table-column
          label="奖励金"
          align="center"
          prop="reward">
          <template slot-scope="r">
            {{r.row.reward}}
            <el-tag size="mini" type="warning" v-if="r.row.type==1">人民币</el-tag>
            <el-tag size="mini" type="warning" v-else>微豆</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          label="领取时间"
          align="center"
          width="140px"
          prop="creattime"
          sortable
          :formatter="dateFormats">
        </el-table-column>
        <el-table-column
          label="提交时间"
          align="center"
          width="140px"
          prop="submittime"
          sortable
          :formatter="dateFormats">
        </el-table-column>
        <el-table-column
          label="提交文字信息"
          align="center"
          width="130"
          >
          <template slot-scope="c">
              <template v-if="c.row.submission.text">{{c.row.submission.text}}</template>
              <el-tag size="mini" type="info" v-else>暂无</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="提交图片数据"
          align="center"
          width="130"
          >
          <template slot-scope="c">
            <template v-if="c.row.submission.images">
              <img :src="imagePrefix+img" style="width: 110px; height: 80px;cursor: pointer;" @click="showImages(img)" v-for="img in c.row.submission.images">
            </template>
            <el-tag size="mini" type="info" v-else>暂无</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="审核时间"
          align="center"
          prop="examinetime"
          width="140px"
          sortable>
            <template slot-scope="r">
                <template v-if="r.row.status===3">{{dateFormat(r.row.examinetime*1000,'Y-m-d H:i')}}</template>
                <el-tag type="primary" size="mini" v-else-if="r.row.status===2">待审核</el-tag>
                <el-tag type="info" size="mini" v-else-if="r.row.status===1">待提交</el-tag>
                <el-tag type="warning" size="mini" v-else-if="r.row.status===-1">审核失败</el-tag>
                <el-tag type="info" size="mini" v-else-if="r.row.status===-2">已过期</el-tag>
            </template>
        </el-table-column>
        <el-table-column
          label="处理说明"
          prop="reason"
          align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="r">
            <el-button type="primary" size="mini" class="ws-mini" @click="edit(r.row)" v-if="r.row.status===2">处理</el-button>
            <el-tag type="success" size="mini" v-else-if="r.row.status===3">已完成</el-tag>
            <el-tag type="info" size="mini" v-else-if="r.row.status===1">待提交</el-tag>
            <el-tag type="warning" size="mini" v-else-if="r.row.status===-1">审核失败</el-tag>
            <el-tag type="info" size="mini" v-else-if="r.row.status===-2">已过期</el-tag>
          </template>
        </el-table-column>
    </el-table>

    <div class="page">{$list->render()|raw}</div>

    <!-- 审核处理 start -->
    <el-dialog title="提现审核" width="500px" :visible.sync="addDialog">
      <el-form ref="forms" :model="data" :rules="rules" label-width="80px">
        <el-form-item label="审核结果">
          <el-radio-group v-model="data.status">
              <el-radio :label="-1">失败</el-radio>
              <el-radio :label="3">通过</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="备注说明" prop="reason">
          <el-input type="textarea" v-model="data.reason" placeholder="备注说明"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button @click="addDialog = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit('forms','{:url(\'handle\')}')">提 交</el-button>
        </div>
    </el-dialog>
    <!-- 审核处理 end -->

    <el-dialog width="500px" :visible.sync="imgDialog">
      <img :src="imagePrefix+imageUrl" style="max-width: 100%; height: auto;">
    </el-dialog>
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script>
var app=new Vue({
    el:"#app",
    mixins:[wsMixins],
    data:{
        tableData:{$list->toJson()|raw}, // 列表数据
        data:{},
        params:{$params|raw},
        addDialog:false,
        rules:{
          reason:{required:true,message:'备注说明不能为空'}
        },

        imgDialog:false,
        imageUrl:'',
        imagePrefix:"{:images()}",
    },
    watch:{
      imgDialog(val){
        if(!val){
          this.imageUrl='';
        }
      }
    },
    methods:{
        edit(row){
          this.data={
            id:row.id,
            status:3,
            reason:row.reason,
          }
          this.addDialog=true;
        },
        showImages(val){
          this.imageUrl=val;
          this.imgDialog=true;
        },
    },
});
</script>
{/block}